<template>
	<el-dialog :title="dialogType + '库类型'" :visible.sync="visible" width="480px" :close-on-click-modal="false" class="form_dialog_wrapper">
		<el-form ref="form" size="medium" :model="formData" :rules="formRules" label-width="100px" class="library_type_form">
			<el-form-item label="库类型名称" prop="name">
				<el-input type="input" v-model="formData.name" maxlength="64" show-word-limit></el-input>
			</el-form-item>
			<el-form-item label="库类型排序" prop="sort">
				<el-input-number v-model="formData.sort" controls-position="right"></el-input-number>
			</el-form-item>
			<el-form-item label="库类型描述" prop="content">
				<el-input type="textarea" v-model="formData.content" autocomplete="off"></el-input>
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" @click="handleSubmitForm">{{ dialogType }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
import { addedLibraryType, updateLibraryType } from '@/api/platform/tbNetLibrary.js';
export default {
	props: {
		value: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			visible: this.value,
			formData: {},
			formRules: {
				name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
			}
		};
	},
	computed: {
		addOrEdit() {
			return Object.keys(this.data).length === 0;
		},
		dialogType() {
			return this.addOrEdit ? '添加' : '修改';
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.$nextTick(() => {
				this.$refs['form'].resetFields();
				this.formData = { ...this.data };
			});
		}
	},
	methods: {
		//提交资源库类型表单
		handleSubmitForm() {
			this.$refs['form'].validate((valid) => {
				if (!valid) return false;
				this.libraryTypeRequest();
			});
		},

		//添加/修改资源库类型请求
		async libraryTypeRequest() {
			let params = { ...this.formData };
			let callFunction = eval(this.addOrEdit ? addedLibraryType : updateLibraryType);
			let result = await callFunction(params).then((res) => res.data);
			console.log(result);
		}
	}
};
</script>

<style lang="scss" scoped>
.library_type_form {
	width: 100%;
	padding: 10px 10px 0 0;
}
</style>
